<template>
  <el-popover
    trigger="hover"
    placement="bottom"
    width="400"
    :popper-class="'my-popover-class'"
  >
    <el-input
      v-model="popoverInput"
      :min-height="500"
      type="textarea"
      :autosize="{ minRows: 1, maxRows: 50 }"
      :style="{ width: '100%' }"
      :disabled="true"
    />
    <div slot="reference">
      <span class="textname">{{ popoverInput }}</span>
    </div>
  </el-popover>
</template>

<script>
export default {
  name: "mypopover",
  props: {
    popoverInput: {
      type: String,
      default: "",
    },
  },
};
</script>

<style lang="scss" scoped>
.my-popover-class {
  max-height: 300px; // 根据需要调整最大高度
  overflow-y: auto; // 允许垂直滚动
}

span.textname {
  display: block;
  width: 100%;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}

/* 其他样式保持不变 */

.el-input.is-disabled ::v-deep .el-input__inner {
  color: #606266;
  background-color: #f5f7fa;
  border: none;
}

.el-textarea.is-disabled ::v-deep .el-textarea__inner {
  color: #606266;
  background-color: white;
  border: none;
  // width: 500px;
  resize: none;
  cursor: pointer;
}
</style>